<template>
  <div class="choose">
    <div class="g-main">
      <div class="choose-title">
        请点击查看<span style="color: blue">{{ searchVocDetails }}</span
        >关联的反应式详细信息
      </div>
      <!-- 大气反应 v-if="this.radio==='大气化学反应'" -->
      <div class="atmospheric" v-if="this.radio === '大气化学反应'">
        <div style="margin-top: 30px">
          <div class="title">光氧化反应：</div>
          <div class="table">
            <ul @click="handle($event)">
              <li
                v-for="(item, index) in tableDataOxygen"
                :key="index + '11'"
                :data-id="item.id"
                :data-react="item.equaPlain"
                v-html="formatting(item.equaPlain)"
              ></li>
            </ul>
          </div>
        </div>
        <div style="margin-top: 30px">
          <div class="title">气液界面反应：</div>
          <div class="table">
            <ul @click="handle($event)">
              <li
                v-for="(item, index) in tableDataGas"
                :key="index + '11'"
                :data-id="item.id"
                :data-react="item.equaPlain"
                v-html="formatting(item.equaPlain)"
              ></li>
            </ul>
          </div>
        </div>
        <div style="margin-top: 30px">
          <div class="title">液相反应：</div>
          <div class="table">
            <ul @click="handle($event)">
              <li
                v-for="(item, index) in tableDataWater"
                :key="index + '11'"
                :data-id="item.id"
                :data-react="item.equaPlain"
                v-html="formatting(item.equaPlain)"
              ></li>
            </ul>
          </div>
        </div>
        <!-- <div style="margin-top: 30px;margin-left:62px;">
        <el-button type="text" size="medium" @click="goforward"
          >点击查看</el-button
        >
      </div> -->
      </div>
      <!-- 催化反应 v-if="this.radio==='催化反应'" -->
      <div class="catalytic" v-if="this.radio === '催化反应'">
        <div style="margin-top: 30px">
          <div class="title">热催化反应：</div>
          <div class="table">
            <ul @click="handle($event)">
              <li
                v-for="(item, index) in tableDateHot"
                :key="index + '11'"
                :data-id="item.id"
                :data-react="item.equaPlain"
                v-html="formatting(item.equaPlain)"
              ></li>
            </ul>
          </div>
        </div>
        <div style="margin-top: 30px">
          <div class="title">光催化反应：</div>
          <div class="table">
            <ul @click="handle($event)">
              <li
                v-for="(item, index) in tableDateLight"
                :key="index + '11'"
                :data-id="item.id"
                :data-react="item.equaPlain"
                v-html="formatting(item.equaPlain)"
              ></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formattingVoc } from "@/api/formatVoc";
import axios from "axios";
export default {
  name: "chooseView",
  data() {
    return {
      form: {
        type: "",
      },
      // 光氧化反应
      tableDataOxygen: [
        {
          equaPlain: "CgH1111+·OH=·CgHs+HO",
        },
        {
          equaPlain: "CgH2222+·OH=·CgHs+HO",
        },
        {
          equaPlain: "CgH3333+·OH=·CgHs+HO",
        },
        {
          equaPlain: "CgH4444+·OH=·CgHs+HO",
        },
        {
          equaPlain: "CgH5555+·OH=·CgHs+HO",
        },
      ],
      OxygenChoose: [],
      // 气液界面反应
      tableDataGas: [
        {
          equaPlain: "CgH1+·OH=·CgHs+HO",
        },
        {
          equaPlain: "CgH2+·OH=·CgHs+HO",
        },
        {
          equaPlain: "CgH3+·OH=·CgHs+HO",
        },
        {
          equaPlain: "CgH4+·OH=·CgHs+HO",
        },
        {
          equaPlain: "CgH5+·OH=·CgHs+HO",
        },
      ],
      GasChoose: [],
      // 气液界面反应
      tableDataWater: [
        {
          equaPlain: "CgH1+·OH333333=·CgHs+HO",
        },
        {
          equaPlain: "CgH2+·OH333333=·CgHs+HO",
        },
        {
          equaPlain: "CgH3+·OH33333=·CgHs+HO",
        },
        {
          equaPlain: "CgH4+·OH33333333=·CgHs+HO",
        },
        {
          equaPlain: "CgH5+·OH333333=·CgHs+HO",
        },
      ],
      //热催化反应
      tableDateHot: [],
      //光催化反应
      tableDateLight: [],
      WaterChoose: [],
      radio: "",
      searchVocDetails: "",
      vocId: "",
      equationId: "",
      equationDetail: "",
    };
  },
  // watch: {
  //   OxygenChoose: {
  //     deep: true,
  //     handler() {
  //       console.log(this.OxygenChoose);
  //     },
  //   },
  // },
  mounted() {
    this.vocId = this.$route.query.vocId;
    this.radio = this.$route.query.radio;
    this.searchVocDetails = this.$route.query.searchVocDetails;
    axios
      .get("http://localhost:9999/vocs/vocequation/getEquationMap", {
        params: {
          id: this.vocId,
          fatherCategory: this.radio,
        },
      })
      .then((res) => {
        this.tableDateHot = res.data.data["热催化反应"];
        this.tableDateLight = res.data.data["光催化反应"];
        this.tableDataGas = res.data.data["气液界面反应"];
        this.tableDataOxygen = res.data.data["光氧化反应"];
        this.tableDataWater = res.data.data["液相反应"];
      });
  },
  methods: {
    handleSelectionChangeOxygen(val) {
      this.OxygenChoose = val;
    },
    handleSelectionChangeGas(val) {
      this.GasChoose = val;
    },
    handleSelectionChangeWater(val) {
      this.WaterChoose = val;
    },
    //反应式格式化
    formatting(str) {
      return formattingVoc(str);
    },
    handle(e) {
      let target = e.target.parentNode.firstChild.innerHTML;
      if (target[0] !== "<") {
        this.equationId = e.target.dataset.id;
        this.equationDetail = e.target.dataset.react;
        this.$router.push({
          path: "/result",
          query: {
            equationId: this.equationId,
            equationDetail: this.equationDetail,
            radio: this.radio,
          },
        });
      }
    },
    //  gotoReact(content) {
    //   console.log(content.voc);
    //   this.$router.push({
    //     path: "/result",
    //     query: {
    //       arry: [content.voc],
    //     },
    //   });
    // },
    // goforward() {
    //   this.$router.push({
    //     path: "/result",
    //     query: {
    //       arry: [...this.OxygenChoose, ...this.GasChoose, ...this.WaterChoose],
    //     },
    //   });
    //   // console.log([
    //   //   ...this.OxygenChoose,
    //   //   ...this.GasChoose,
    //   //   ...this.WaterChoose,
    //   // ]);
    // },
  },
};
</script>

<style scoped lang="scss">
.choose {
  margin: 0px;
  width: 1100px;

  // height: 100px;
  .choose-title {
    text-align: left;
    font-size: large;
    margin-left: 10px;
    font-weight: 900;
  }
  .title {
    text-align: left;
    font-weight: 500;
    margin-left: 10px;
    margin-top: 20px;
  }
  .table {
    margin-left: 15px;
    margin-top: 15px;
    li {
      margin-left: 0px;
      margin-bottom: 20px;
      text-align: left;
      font-size: small;
      //  list-style-type :none;
    }
  }
  .el-button--medium {
    font-size: 18px;
  }
}
</style>
